<template>
  <view class="page w-full bg-f6f6f6">
    <z-paging ref="paging" v-model="listData" @query="queryList">
      <view class="w-690 p-30 pr-10 mt-20 m-auto radius-20 bg-white flex align-items-center justif-between" v-for="(item,index) in listData"
            :key="index" @click="$toPage(`/planModule/detail?conditionId=${item.id}`)">
        <view class="flex align-items-center">
          <image :src="item.sexy === 1 ? male : female"  class="w-100 h-100 radius-circle">
          </image>
          <view class="ml-20">
            <view class="f-30 text-666 flex align-item-center">
              <image :src="`${$oss}/static/ai/male.png`" class="w-30 h-30 radius-circle" v-if="item.sexy === 1"/>
              <image :src="`${$oss}/static/ai/female.png`" class="w-30 h-30 radius-circle" v-else-if="item.sexy === 2" />
              <text class="ml-10">{{ item.customerName }}</text>
              <text class="ml-10">{{ item.age }}岁</text>
              <text class="ml-10 mr-10">【{{ item.productName }}】</text>
            </view>
            <view class="flex align-items-center flex-wrap">
              <wd-tag mark plain type="primary" custom-class="space">
                {{ item.productIndemnifyPayIdName }} / {{ item.productIndemnifyIdName }}
              </wd-tag>
              <wd-tag mark plain type="primary" custom-class="space">保额{{ item.putFeeName }}</wd-tag>
              <wd-tag mark plain type="primary" custom-class="space">保费{{ item.firstYearFee }}元</wd-tag>
            </view>
            <view class="flex align-items-center mt-10 f-24 text-999">
              {{ item.createTime }}
            </view>
          </view>
        </view>
        <wd-icon name="arrow-right" size="20px" color="#ccc"></wd-icon>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import male from '@/static/male.png'
import female from '@/static/female.png'

const {api_post_customerList} = useRequest()
const {proxy} = getCurrentInstance()

const paging = ref(null)
const listData = ref([])
const queryList = (pageNo, pageSize) => {
  api_post_customerList({page: pageNo - 1, limit: pageSize}).then(res => {
    paging.value.complete(res.data.records);
  }).catch(res => {
    paging.value.complete(false);
  })
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
}

:deep(.space) {
  margin-right: 10rpx;
  margin-top:5px;
}
</style>